<!DOCTYPE html>
<html>

<head>
    {include file="Public/header"}
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .row {
            margin: 0;
            padding: 0
        }

        .div_H {
            min-height: 50px;
        }

        .btn {
            margin: 0 10px;
        }

        .inputremindPeple {
            max-width: 200px;
            height: 26px;
            display: inline-block;
        }

        .aprovalSystemTable thead th {
            text-align: center;
        }

        .blueColor {
            color: blue;
        }
    </style>

</head>

<body class="white-bg">
<div class="row white-bg setRemindPeopleK">
    <div class="page-heade">
       <h2 class="title_color text-center">分组货号管理</h2>
    </div>

        <table class="table table-bordered white-bg" style="margin-bottom: 5px">

            <tr>
                <td class="text-right">分组编号：</td>
                <td colspan="2">{$data.sn}</td>
                <td class="text-right">分组名称：</td>
                <td colspan="2">{$data.title}</td>
                <td class="text-right">包含系统数：</td>
                <td colspan="2"><a href="javascript:;">{$data.xitongshu}</a></td>
                <td class="text-right">包含单品数：</td>
                <td colspan="2">{$data.danpinshu}</td>
            </tr>
            <tr>
                <td colspan="12">
                    <label for="" class="col-xs-3 control-label"> 请在此输入要新增的产品名称：</label>
                    <div class="col-xs-3">
                        <div class="input-group">
                            <input name="stuff" id="testNoBtn" type="text" placeholder="请输入关键字或空格查询" class="input12 form-control" value="">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                            <div class="renyuan" id="renyuan">
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="12">
                    <button class="btn btn-danger del">删除</button>
                    <button class="btn btn-primary" id="new">新增</button>
                    <button class="btn btn-info">导入数据</button>
                </td>
            </tr>
        </table>
    <form action="" method="post" id="form_system">
        <table class="table table-bordered aprovalSystemTable text-center" style="width: 100%;">
            <thead>
            <tr>
                <th style="vertical-align: middle !important;text-align: center;"><input type="checkbox" id="checkAll">
                </th>
                <th>NO.</th>
                <th>产品编号</th>
                <th>产品名称</th>
                <th>货号</th>
            </tr>
            </thead>

            <tbody>

                {volist name="list" id="row" key="k"}
                <tr>
                    <td><input type="checkbox" name="items" value="{$row.id}"></td>
                    <td>{$k}</td>
                    <td>{$row.pro_no}</td>
                    <td>
                        {$row.pro_name}
                    </td>
                    <td><input type="text" class="form-control" name="sn[{$row.id}]" value="{$row.sn}"></td>
                </tr>
                {/volist}
            </tbody>


        </table>
    </form>
        <div class="row white-bg border_S border_R border_L" style="padding:0  0 5px 0">
            <button class="btn btn-danger del">删除</button>
        </div>
        <div class="row white-bg border_S border_R border_L text-center" style="padding:5px 0;">
            <button class="btn btn-success" type="submit" id="tijiao">保存</button>
            <button class="btn btn-danger" id="fanhui">返回</button>
        </div>

</div>

<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
    $(document).ready(function () {
        $('.del').on('click',function(){
            var arr = []
            $('input[name=items]:checked').each(function(i,o){
                arr.push($(o).val())
            })
            arr = arr.join(',')
            $.post('{:url("delProduct")}',{ids:arr},function(data){
                if(data.success){
                    location.reload()
                }else{
                    swal(data.msg,'','warning')
                }
            },'json')
        })
        $('#new').on('click',function(){
            var id = $('#renyuan .ren').data('id')
            if(typeof id != 'undefined'){
                $.post('{:url("addProduct")}',{id:id,groupid:'{$data.id}'},function(data){
                    if(data.success){
                        location.reload()
                    }else{
                        swal(data.msg,'','warning')
                    }
                },'json')
            }

            return false
        })
        $('body').on('click','#renyuan .ren .close',function(){
            $(this).closest('.ren').remove()
        })
        /**
         * 测试(首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，可清除)
         */
        $("#testNoBtn").bsSuggest({
            url: "{:url('provicejson')}",
            /*effectiveFields: ["userName", "shortAccount"],
             searchFields: [ "shortAccount"],*/
            effectiveFieldsAlias:{userName: "姓名"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            $(this).val('')
            $('#renyuan').html('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
            //console.log('onSetSelectValue: ', keyword, data);
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });

        $('#tijiao').on('click',function(){
            var sn = $('#form_system').serialize();

            $.post('{:url("savesn")}',sn,function(data){
                if(data.success){
                    location.reload()
                }else{
                    swal(data.msg,'','warning')
                }
            },'json')
            return false
        })

        /*tabel复选框操作*/
        $("#checkAll").click(function () {

            $("[name=items]:checkbox").prop("checked", $(this).prop("checked"));
            if ($("[name=items]:checkbox").prop("checked") != true) {
                // console.log($(this))
                $("[name=items]:checkbox").parents("tr").css("backgroundColor", "#fff")
            } else {
                $("[name=items]:checkbox").parents("tr").css("backgroundColor", "#f8f800")

            }
        })

        $("[name=items]:checkbox").click(function () {
            //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
            // console.log(1)
            var $tmp = $("[name=items]:checkbox");
            if ($(this).prop("checked") != true) {
                // console.log($(this))
                $(this).parent().parent().css("backgroundColor", "#fff")
            } else {
                $(this).parent().parent().css("backgroundColor", "#f8f800")

            }
            //用filter()方法筛选出选中的复选框，并直接给CheckedAll赋值
            $("#checkAll").prop('checked', $tmp.length == $tmp.filter(':checked').length);

        })

        $('#fanhui').on('click',function(){
            parent.layer.close(parent.layer.getFrameIndex(window.name))
        })

    })
</script>
</body>

</html>